<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.4.0/css/font-awesome.min.css" />
		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link href="css/index.css" rel="stylesheet" />
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lcZA6Wfuiqjfpa6TdhYsEHyLoY6WD0Ny"></script>
	</head>

	<body>
		<div class="mui-inner-wrap">
			<!-- 主页面标题 -->
			<header class="mui-bar mui-bar-nav">
				<div class="mui-nav-content">
					<div class="mui-row">
						<div class="mui-col-xs-1">
							<a class="mui-icon mui-pull-left" href="#offCanvasSide">
								<i class="fa fa-navicon fa-fx"></i>
							</a>
						</div>
						<div class=" mui-col-xs-9 ">
							<div class="mui-input-row mui-search">
								<input type="search" class="mui-input-clear" placeholder="请输入楼盘名称">
							</div>
						</div>
						<div class="mui-col-xs-2 ">
							<a class="mui-icon mui-pull-right" href="#offCanvasSide2">
								<i class="fa fa-filter fa-fx"></i> <small style="font-size: 12px;margin-left:-10px;margin-top:-10px;">搜索</small>
							</a>
						</div>
					</div>
				</div>
			</header>
			<div class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<!-- 主界面具体展示内容 -->
					<div class="body" id="city-list">
						<div class="container list mui-row">
							<div class="mui-col-xs-6">
								<ul class="mui-row">
									<li class="mui-col-xs-6">
										<img src="images/baisha.jpg" alt="">
										<h4>白沙</h4>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-6">
										<img src="images/baoting.jpg" alt="">
										<h4>保亭</h4>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-12">
										<img src="images/sanya.jpg" alt="" style="height:150px;">
										<h3>三亚</h3>
										<p>美丽椰城</p>
									</li>
								</ul>
							</div>
							<div class="mui-col-xs-6">
								<ul class="mui-row">
									<li class="mui-col-xs-12">
										<img src="images/haikou1.jpg" alt="" style="height:150px;">
										<h3>海口</h3>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-6".>
										<img src="images/changjiang.jpg" alt="">
										<h4>昌江</h4>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-6">
										<img src="images/chengmai.jpg" alt="">
										<h4>澄迈</h4>
										<p>美丽椰城</p>
									</li>
								</ul>
							</div>
						</div>

						<div class="container list mui-row">
							<div class="mui-col-xs-6">
								<ul class="mui-row">
									<li class="mui-col-xs-6">
										<img src="images/danzhou.jpg" alt="" style="height:76px;">
										<h4>儋州</h4>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-6">
										<img src="images/dingan.jpg" alt="">
										<h4>定安</h4>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-12">
										<img src="images/qionghai1.jpg" alt="">
										<h3>琼海</h3>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-6">
										<img src="images/qiongzhong.jpg" alt="">
										<h4>琼中</h4>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-6">
										<img src="images/dongfang.jpg" alt="">
										<h4>东方</h4>
										<p>美丽椰城</p>
									</li>
								</ul>
							</div>
							<div class="mui-col-xs-6">
								<ul class="mui-row">
									<li class="mui-col-xs-12">
										<img src="images/wenchang1.jpg" alt="">
										<h3>文昌</h3>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-12">
										<img src="images/lingao1.jpg" alt="">
										<h3>临高</h3>
										<p>美丽椰城</p>
									</li>
								</ul>
							</div>
						</div>

						<div class="container list mui-row">
							<div class="mui-col-xs-6">
								<ul class="mui-row">
									<li class="mui-col-cs-12">
										<img src="images/lingshui1.jpg" alt="">
										<h3>陵水</h3>
										<p>美丽椰城</p>
									</li>
								</ul>
							</div>
							<div class="mui-col-xs-6">
								<ul class="mui-row">
									<li class="mui-col-xs-6">
										<img src="images/ledong.jpg" alt="">
										<h4>乐东</h4>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-6">
										<img src="images/tunchang.jpg" alt="">
										<h4>屯昌</h4>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-6">
										<img src="images/wanning.jpg" alt="">
										<h4>万宁</h4>
										<p>美丽椰城</p>
									</li>
									<li class="mui-col-xs-6">
										<img src="images/wuzhishan.jpg" alt="">
										<h4>五指山</h4>
										<p>美丽椰城</p>
									</li>
								</ul>
							</div>
						</div>

					</div>
				</div>
				
				<div class="mui-off-canvas-backdrop"></div>
			</div>
			<script src="js/mui.min.js " type="text/javascript " charset="utf-8 "></script>
			<script type="text/javascript ">
				mui.init()
				mui('.mui-scroll-wrapper').scroll({
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
				});
			</script>
	</body>

</html>